<template>
  <el-drawer
    :modal="false"
    :visible.sync="is_open"
    v-if="is_open"
    :withHeader="false"
  >
    <div class="detail-content">
      <img class="detail-image" ref="bannerHeight" :src="imgurl" alt="无图片" />

      <Camera
        v-drag
        :id="camera.id"
        v-for="camera in cameras"
        :key="camera.id"
        :camera-id="camera.id"
        :camera-top="camera.y"
        :camera-left="camera.x"
        :camera-title="camera.title"
        :camera-url="camera.url"
      >
      </Camera>
    </div>
  </el-drawer>
</template>

<script>
import Camera from "@/components/Camera";
// import addWindow from "@/util/CreateCameraDialog";
// import { createModal } from "@/util/Modal";
export default {
  name: "Carousel",
  components: {
    Camera,
  },
  //接收来自父组件的数据
  props: {
    imgurl: {
      type: String,
      default: "",
    },
    cameras: {
      type: Array,
      default: () => [],
    },
    //图片宽
    width: {
      type: String,
      default: "800px",
    },
    //图片高
    height: {
      type: String,
      default: "600px",
    },
  },
  data() {
    return {
      imgheight: "",
      imgwidth: "",
      is_open: false,
      visible: false,
    };
  },
  mounted() {
    // this.imgLoad();
    // window.addEventListener(
    //   "resize",
    //   () => {
    //     this.height = document.body.clientHeight;
    //     this.width = document.body.clientWidth;
    //     this.imgLoad();
    //   },
    //   false
    // );
  },

  methods: {
    // imgLoad() {
    //   this.$nextTick(() => {
    //     this.bannerHeight = document.body.clientHeight;
    //     this.height = document.body.clientHeight;
    //     this.width = document.body.clientWidth;
    //   });
    //},
    show() {
      this.is_open = true;
    },
    hide() {
      this.is_open = false;
    },
  },
};
</script>

<style>
.el-drawer {
  margin: 0 auto !important;
  padding: 0;
  background-color: rgba(255, 255, 255, 0);
  box-shadow: none !important;
  border: 0;
}
.el-drawer__header {
  margin: 0;
  color: red;
  padding: 0;
}
.el-drawer__close-btn {
  font-size: 32px;
  align-items: center;
}

/* .el-drawer__headerbtn {
  top: 10px;
  font-size: 32px;
}
.el-drawer__headerbtn .el-drawer__close {
  text-align: center;
  color: black;
  font-weight: 400;
} */
.el-drawer__body {
  padding: 0px;
  margin: 0;
  position: relative;
}
.detail-image {
  /* background-size: cover;
  max-height: 100%; */
  height: auto;
  max-width: 100%;
}
.detail-content {
  height: 100%;
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;
  text-align: justify;
  margin: 0 auto;
  color: #fff;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>
